<template>
  <div class="condition-action">
    <el-form ref="conditionForm" label-width="140px" :model="conditionForm">
      <el-form-item :label="`${itemData.title}：`" :required="itemData.title === '告警触发条件' ? true : false">
        <el-row v-for="(item, index) in conditionForm.alarmConditionActionList" :key="index" class="condition-action-row">
            <el-col :span="itemData.title === '告警联动动作' && item.selectFirstValue === 3 ? 4 : 7">
              <template v-if="itemData.title === '告警触发条件'">
                <el-form-item
                  :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
                  :prop="'alarmConditionActionList.' + index + '.selectFirstValue'" :rules="[{ required: true, message: itemData.placeholder1, trigger: 'change' }]">
                  <el-select
                    :placeholder="itemData.placeholder1"
                    filterable
                    v-model="item.selectFirstValue"
                    :disabled="shareData.isDisable"
                    size="small"
                    style="width: 100%"
                    @change="handleChange(itemData.title, item.selectFirstValue, index)"
                  >
                    <el-option
                      v-for="item in alarmFirstList"
                      :key="item.id"
                      :label="item.paramMemo"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item
                  :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
                  :prop="'alarmConditionActionList.' + index + '.selectFirstValue'" :rules="[{ required: false, message: itemData.placeholder1, trigger: 'change' }]">
                  <el-select
                    :placeholder="itemData.placeholder1"
                    filterable
                    clearable
                    v-model="item.selectFirstValue"
                    :disabled="shareData.isDisable"
                    size="small"
                    style="width: 100%"
                    @change="handleChange(itemData.title, item.selectFirstValue, index)"
                  >
                    <el-option
                      v-for="n in alarmFirstList"
                      :key="n.id"
                      :label="n.name"
                      :value="n.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-col>
            <!-- 指定设备 - 设备类型开始 -->
            <el-col
              :span="itemData.title === '告警联动动作' && item.selectFirstValue === 3 ? 4 : 7"
              v-if="itemData.title === '告警联动动作' && item.selectFirstValue === 3"
            >
              <el-form-item
                :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
              >
                <el-select
                  placeholder="请选择设备类型"
                  clearable
                  filterable
                  v-model="item.eqptTypeId"
                  @change="handleChange(itemData.title, item.selectFirstValue, index, item.eqptTypeId)"
                  :disabled="shareData.isDisable"
                  size="small" style="width: 100%"
                >
                  <el-option
                    v-for="n in eqptTypeList"
                    :key="n.typeId"
                    :label="n.typeName"
                    :value="n.typeId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 指定设备 - 设备类型结束 -->
            <!-- 指定设备 - 告警设备开始 -->
            <el-col
              :span="itemData.title === '告警联动动作' && item.selectFirstValue === 3 ? 6 : 7"
              v-if="itemData.title === '告警联动动作' && item.selectFirstValue === 3"
            >
              <el-form-item
                :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
              >
                <el-select
                  placeholder="请选择告警设备"
                  clearable
                  filterable
                  multiple
                  collapse-tags
                  v-model="item.eqptIdList"
                  @change="handleChange"
                  size="small" style="width: 100%"
                >
                  <el-option
                    v-for="n in item.alarmEqptList"
                    :key="n.eqptId"
                    :label="`${n.eqptName} - ${n.areaName}`"
                    :value="n.eqptId"
                    :disabled="shareData.isDisable"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 指定设备 - 告警设备结束 -->
            <!-- 判断条件或开关属性开始 -->
            <el-col :span="itemData.title === '告警联动动作' && item.selectFirstValue === 3 ? 4 : 7">
              <template v-if="itemData.title === '告警触发条件'">
                <el-form-item
                  :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
                  :prop="'alarmConditionActionList.' + index + '.selectSecondValue'" :rules="[{ required: true, message: itemData.placeholder2, trigger: 'change' }]">
                  <el-select :placeholder="itemData.placeholder2" filterable v-model="item.selectSecondValue" @change="handleChange" :disabled="shareData.isDisable" size="small" style="width: 100%">
                    <el-option
                      v-for="item in alarmSecondList"
                      :key="item.id"
                      :label="item.completeName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else>
                <!-- 告警联动动作 -->
                <el-form-item
                  :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
                  :prop="'alarmConditionActionList.' + index + '.selectSecondValue'" :rules="[{ required: false, message: itemData.placeholder2, trigger: 'change' }]">
                  <el-select
                    :placeholder="itemData.placeholder2"
                    filterable
                    clearable
                    v-model="item.selectSecondValue"
                    @change="handleChange(itemData.title, 'selectSecondValue', index, item.selectSecondValue)"
                    :disabled="shareData.isDisable"
                    size="small"
                    style="width: 100%"
                  >
                    <template v-if="itemData.title === '告警联动动作' && item.selectFirstValue === 3">
                      <!-- 指定状态下 -->
                      <el-option
                        v-for="n in item.actionMonitorList"
                        :key="n.id"
                        :label="n.paramMemo"
                        :value="n.id"
                      ></el-option>
                    </template>
                    <template v-else>
                      <el-option
                        v-for="n in alarmSecondList"
                        :key="n.id"
                        :label="n.paramMemo"
                        :value="n.id"
                      ></el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </template>
            </el-col>
            <!-- 判断条件或开关属性结束 -->
            <el-col :span="itemData.title === '告警联动动作' && item.selectFirstValue === 3 ? 3 : 7">
              <el-form-item
                :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}"
                :prop="'alarmConditionActionList.' + index + '.selectThirdValue'"
                :rules="[{ required: itemData.title === '告警触发条件' ? true : false, message: '请选择', trigger: 'change' }]"
              >
                <template v-if="item.propList && item.propList.length">
                  <el-select placeholder="请选择阈值" :clearable="itemData.title === '告警联动动作' ? true : false" filterable v-model="item.selectThirdValue" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange">
                    <el-option
                      v-for="n in item.propList"
                      :key="n.id"
                      :label="n.memo"
                      :value="n.id"
                    ></el-option>
                  </el-select>
                </template>
                <template v-else>
                  <el-input v-model="item.selectThirdValue" placeholder="请输入阈值" :clearable="itemData.title === '告警联动动作' ? true : false" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange"></el-input>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <template v-if="!shareData.isDisable">
                <span :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}" @click="handleActionAdd" class="icon-add"><i class="el-icon-circle-plus"/></span>
                <span :style="item.deleteFlag && item.deleteFlag === 1 ? {display: 'none'} : {}" v-if="index" @click="handleActionDel(item, index)" class="icon-delete"><i class="el-icon-remove"/></span>
              </template>
            </el-col>
          </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getMonitorList } from '../../js/alarmStrategy'
export default {
  name: 'ConditonOrAction',
  inject: ['shareData'],
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: Object
    },
    itemData: {
      type: Object,
      default: () => ({})
    },
    alarmFirstList: {
      type: Array,
      default: () => ([])
    },
    alarmSecondList: {
      type: Array,
      default: () => ([])
    },
    alarmEqptList: {
      type: Array,
      default: () => ([])
    },
    eqptTypeList: {
      type: Array,
      default: () => ([])
    },
    allAlarmEqptList: {
      type: Array,
      default: () => ([])
    },
    eqptTypeId: {
      type: String,
      default: ''
    }
  },
  watch: {
    eqptTypeId: {
      handler () {
        if (this.shareData.title === '编辑自定义告警') {
          this.conditionForm.alarmConditionActionList.forEach(n => {
            n.deleteFlag = 1
          })
          this.conditionForm.alarmConditionActionList.unshift({ selectFirstValue: null, selectSecondValue: null, selectThirdValue: null, eqptTypeId: null, alarmEqptList: [], actionMonitorList: [], eqptIdList: [], propList: [] })
        } else {
          this.conditionForm.alarmConditionActionList = [{ selectFirstValue: null, selectSecondValue: null, selectThirdValue: null, eqptTypeId: null, alarmEqptList: [], actionMonitorList: [], eqptIdList: [], propList: [] }]
        }
      }
    }
  },
  data () {
    return {
      conditionForm: {
        alarmConditionActionList: [
          {
            selectFirstValue: null,
            selectSecondValue: null,
            selectThirdValue: null,
            eqptTypeId: null,
            alarmEqptList: [],
            actionMonitorList: [],
            eqptIdList: [],
            propList: []
          }
        ]
      },
      firstFlag: true
    }
  },
  mounted () {
    if (this.shareData.title !== '新增自定义告警') {
      this.conditionForm = { ...this.conditionForm, ...this.modelValue }
      this.handleSpecifiedDevice()
    }
  },
  methods: {
    handleActionAdd () {
      // 告警联动动作添加
      this.conditionForm.alarmConditionActionList.push({ selectFirstValue: null, selectSecondValue: null, selectThirdValue: null, eqptTypeId: null, alarmEqptList: [], actionMonitorList: [], eqptIdList: [], propList: [] })
    },
    handleActionDel (item, index) {
      // 告警联动动作删除
      if (item.id) {
        this.conditionForm.alarmConditionActionList[index].deleteFlag = 1
      } else {
        this.conditionForm.alarmConditionActionList.splice(index, 1)
      }
      this.handleChange()
    },
    handleChange (type, id, index, eqptTypeId) {
      if (type === '告警触发条件') {
        this.setIsDropDown(id, this.alarmFirstList, index)
      } else if (type === '告警联动动作') {
        if (id === 3) {
          // 指定设备
          this.conditionForm.alarmConditionActionList[index].actionMonitorList = []
          this.conditionForm.alarmConditionActionList[index].selectSecondValue = null
          this.conditionForm.alarmConditionActionList[index].selectThirdValue = null
          this.conditionForm.alarmConditionActionList[index].propList = []
          this.conditionForm.alarmConditionActionList[index].selectThirdValue = null
          this.conditionForm.alarmConditionActionList[index].eqptTypeId = eqptTypeId
          this.setEqptType(index, eqptTypeId)
        } else {
          this.conditionForm.alarmConditionActionList[index].selectSecondValue = null
          if (!this.conditionForm.alarmConditionActionList[index].selectSecondValue) this.conditionForm.alarmConditionActionList[index].selectThirdValue = null
          if (this.conditionForm.alarmConditionActionList[index].selectFirstValue === 3) {
            if (id === 'selectSecondValue') {
              this.conditionForm.alarmConditionActionList[index].selectSecondValue = eqptTypeId
              this.setIsDropDown(eqptTypeId, this.conditionForm.alarmConditionActionList[index].actionMonitorList, index)
            }
          } else {
            if (id === 'selectSecondValue') {
              this.conditionForm.alarmConditionActionList[index].selectSecondValue = eqptTypeId
              this.setIsDropDown(eqptTypeId, this.alarmSecondList, index)
            }
          }
        }
      }
      this.$emit('change', this.conditionForm)
    },
    handleSpecifiedDevice () {
      // 处理指定设备下 - 反控命令字段
      const { alarmConditionActionList } = this.conditionForm
      if (alarmConditionActionList?.length) {
        alarmConditionActionList.forEach((n, i) => {
          if (n.selectFirstValue === 3 && n.eqptTypeId) {
            this.getMonitorList(n.eqptTypeId, i).then(() => {
              this.setIsDropDown(n.selectSecondValue, this.conditionForm.alarmConditionActionList[i].actionMonitorList, i)
            })
          }
        })
      } else {
        this.firstFlag = false
      }
    },
    setEqptType (index, eqptTypeId) {
      if (eqptTypeId) {
        this.conditionForm.alarmConditionActionList[index].eqptIdList = []
        this.conditionForm.alarmConditionActionList[index].alarmEqptList = this.allAlarmEqptList.filter(n => n.eqptTypeId === eqptTypeId)
        this.getMonitorList(eqptTypeId, index)
      } else {
        this.conditionForm.alarmConditionActionList[index].eqptIdList = []
        this.conditionForm.alarmConditionActionList[index].alarmEqptList = []
      }
    },
    setIsDropDown (id, data, index) {
      const findId = data.find(n => n.id === id)
      if (!this.firstFlag) {
        this.conditionForm.alarmConditionActionList[index].selectThirdValue = null // 切换属性下拉把第三个置空
        this.firstFlag = false
      }
      if (findId && id === findId.id && findId.propList?.length) {
        this.conditionForm.alarmConditionActionList[index].propList = findId.propList
      } else {
        this.conditionForm.alarmConditionActionList[index].propList = []
      }
    },
    async getMonitorList (eqptTypeId, index) {
      try {
        const res = await getMonitorList({
          eqptTypeId,
          eqptTypeName: null,
          messageType: 0,
          pageNum: 1,
          pageSize: 10,
          tenantName: null,
          tenantNo: null
        })
        if (res.code === 0) {
          this.conditionForm.alarmConditionActionList[index].actionMonitorList = res.data.sendParamList.filter(n => n.showFlag === 1)
        }
      } catch (e) {}
    }
  }
}
</script>
<style lang="scss" scoped>
.condition-action {
  .condition-action-row {
    .el-col {
      padding: 0 10px 0 0;
    }
    &::v-deep {
    .el-form-item {
      margin-bottom: 10px;
      .el-form-item__error {
        padding-top: 0;
      }
    }
  }
  }
  .icon-add, .icon-delete {
    cursor: pointer;
    display: inline-block;
    line-height: 40px;
    margin-top: 4px;
    & > i {
      font-size: 24px;
    }
  }
  .icon-add {
    color: #1ae1e6;
  }
  .icon-delete {
    margin-left: 4px;
    color: #F56C6C;
  }
}
</style>
